<template>
  <div class="person">
    <h2>需求：当水温达到60度，或水位达到80cm时，给服务器发请求</h2>
    <h2>当前水温：{{ temp }} ℃</h2>
    <h2>当前水位：{{ height }} cm</h2>
    <button @click="changeTemp">点我水温+10</button>
    <button @click="changeHeight">点我水位+10</button>
  </div>
  
</template>



<script lang="ts" setup name="Person">
import { ref, watch, watchEffect } from 'vue'

let temp = ref(10)
let height = ref(0)

function changeTemp() {
  temp.value += 10
}

function changeHeight() {
  height.value += 10
}

// 监视--watch 实现
// 如果有多个监视，比如7个，就可以用watchEffect来代替
//watch([temp, height], (val) => {
//  console.log(val, 'temp:', val[0], 'height:', val[1])
//  // 从val获取最新水温和水位
//  let [newTemp, newHeight] = val
//  // 逻辑
//  if (newTemp >= 60 || newHeight > 80) {
//    console.log('给服务器发请求')
//    alert('水位过高，请注意安全')
//  }
//})

// 监视--watchEffect 实现
watchEffect(() => {
  console.log('@')
  if (temp.value >= 60 || height.value > 80) {
    console.log('给服务器发请求')
  }
})


</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px
}

button {
  margin: 0 5px;
}
li {
  font-size: 20px;
}
</style>